<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5语义标签示例</title>
  <style>
    body {
        font-family: 'Arial', sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        color: #333;
    }
    header {
        background-color: #2c3e50;
        color: white;
        padding: 1rem;
        text-align: center;
    }
    nav {
        background-color: #34495e;
        padding: 0.5rem;
    }
    nav ul {
        list-style: none;
        padding: 0;
        display: flex;
        gap: 1rem;
        justify-content: center;
    }
    nav a {
        color: white;
        text-decoration: none;
        padding: 0.5rem 1rem;
    }
    nav a:hover {
        background-color: #2c3e50;
        border-radius: 4px;
    }
    main {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem;
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 2rem;
    }
    article {
        background-color: #f8f9fa;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    section {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    aside {
        background-color: #f1f3f5;
        padding: 1.5rem;
        border-radius: 8px;
    }
    footer {
        background-color: #2c3e50;
        color: white;
        text-align: center;
        padding: 1rem;
        margin-top: 2rem;
    }
    figure {
        margin: 1rem 0;
    }
    figcaption {
        text-align: center;
        color: #666;
        font-style: italic;
    }
    time {
        color: #666;
        font-size: 0.9rem;
    }
    .author-info {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 1rem 0;
    }
    .author-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
  </style>
</head>
<body>
<!-- 页面头部 -->
<header>
  <h1>技术博客</h1>
  <p>分享前端开发的知识与经验</p>
</header>

<!-- 导航栏 -->
<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">关于我</a></li>
  </ul>
</nav>

<!-- 主要内容区域 -->
<main>
  <!-- 文章内容 -->
  <article>
    <header>
      <h2>HTML5语义化标签的优势与实践</h2>
      <div class="author-info">
        <img src="https://picsum.photos/50/50?random=1" alt="作者头像" class="author-avatar">
        <div>
          <p>作者: 前端开发者</p>
          <p>发布日期: <time datetime="2023-09-24">2023年9月24日</time></p>
        </div>
      </div>
    </header>

    <section>
      <h3>什么是HTML5语义化标签？</h3>
      <p>HTML5语义化标签是指那些能够清晰描述其包含内容含义的标签。与传统的div标签相比，语义化标签能够让浏览器和开发者更清楚地理解页面结构和内容。</p>
      <p>例如，&lt;header&gt;标签明确表示这是页面或区块的头部，&lt;nav&gt;表示导航区域，&lt;article&gt;表示一篇独立的文章内容。</p>
    </section>

    <section>
      <h3>语义化标签的优势</h3>
      <ul>
        <li>提高代码的可读性和可维护性</li>
        <li>有利于搜索引擎优化(SEO)</li>
        <li>提升无障碍访问性，帮助屏幕阅读器更好地理解页面</li>
        <li>减少对CSS的依赖，使页面结构更加清晰</li>
      </ul>
    </section>

    <section>
      <h3>常用的HTML5语义标签</h3>
      <figure>
        <img src="https://picsum.photos/800/400?random=2" alt="HTML5语义标签结构示意图" width="100%">
        <figcaption>HTML5语义标签页面结构示意图</figcaption>
      </figure>
      <p>上图展示了一个典型的使用HTML5语义标签构建的页面结构，包括header、nav、main、article、section、aside和footer等标签。</p>
    </section>

    <footer>
      <h3>文章标签</h3>
      <p>
        <span style="background-color: #e9ecef; padding: 0.3rem 0.6rem; border-radius: 4px; margin-right: 0.5rem;">HTML5</span>
        <span style="background-color: #e9ecef; padding: 0.3rem 0.6rem; border-radius: 4px; margin-right: 0.5rem;">语义化</span>
        <span style="background-color: #e9ecef; padding: 0.3rem 0.6rem; border-radius: 4px;">前端开发</span>
      </p>
    </footer>
  </article>

  <!-- 侧边栏 -->
  <aside>
    <h3>关于作者</h3>
    <p>资深前端开发者，拥有10年Web开发经验，专注于HTML5、CSS3和JavaScript技术分享。</p>

    <h3>热门文章</h3>
    <ul>
      <li><a href="#">CSS Grid布局完全指南</a></li>
      <li><a href="#">JavaScript异步编程模式</a></li>
      <li><a href="#">响应式设计最佳实践</a></li>
      <li><a href="#">前端性能优化技巧</a></li>
    </ul>

    <h3>订阅博客</h3>
    <form>
      <label for="email">输入您的邮箱：</label>
      <input type="email" id="email" placeholder="your@email.com">
      <button type="submit">订阅</button>
    </form>
  </aside>
</main>

<!-- 页脚 -->
<footer>
  <section>
    <h3>联系方式</h3>
    <p>邮箱: contact@techblog.com</p>
    <p>微信: techblog_wechat</p>
  </section>
  <p>&copy; 2023 技术博客 - 保留所有权利</p>
</footer>
</body>
</html>
    